<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>帖子详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
	<link href="../../css/city/reset.css" rel="stylesheet" />
	<link href="../../css/city/tribune.css" rel="stylesheet" />
	<script src="../../js/statistics.js"></script>
	<style>
		body{
			background: #ffffff;
		}
		.mui-bar{
			background: #43ac45;
		}
		.mui-title{
			color:#ffffff;
		}
		.mui-action-back{
			color: #ffffff;
		}
		.lists .list{
			padding-top:60px;
			border-bottom: none;
		}
		.bottom{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 48px;
			background: #f2f2f2;
			overflow: hidden;
		}
		.bottom label{
			display: inline-block;
			width: calc( 80vw - 70px);
			height: 48px;
			margin-top: 6px;
		}
		.iscol{
			display: inline-block;
			width: 48px;
			height: 100%;
		}
		.col{
			background: url('../../images/city/star-border.png') 10px 10px no-repeat;
			background-size: 28px 28px;

		}
		.col_ {
			background: url('../../images/city/star-yellow.png') 10px 10px no-repeat;
			background-size: 28px 28px;
		}
		.bottom .word{
			display: inline-block;
			width: calc( 80vw - 70px);
			height: 36px;
			border:none;
		}
		.send{
			display: inline-block;
			width: 20vw;
			height: 36px;
			margin-right: 12px;
			margin-top: 6px;
			background:#43ac45 ;
			color:#ffffff;
			text-align: center;
			line-height: 36px;
			-webkit-border-radius:6px;
			border-radius:6px;
		}
		.lists{
			margin-bottom: 50px;
		}
		/*图片预览*/
		.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 20;
			background-color: #000;
		}
		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}
		.mui-preview-header {
			height: 44px;
			top: 0;
		}
		.mui-preview-footer {
			height: 50px;
			bottom: 0;
			text-align: center;
		}
		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto;
			width: 70px;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}
		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}
		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}
		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}
		.mui-zoom-scroller {
			position: absolute;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}
		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}
		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}
		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}
		.mui-preview-loading.mui-active {
			display: block;
		}
		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}
		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}
		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		.comment{
			width: 100%;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">详情</h1>
	</header>
	<div class="lists">
		<div class="list clear">
			<div class="fl">
				<img src="" alt="用户头像" class="userhead">
			</div>
			<div class="fr">
				<div class="name limit">用户名</div>
				<div class="title limit">标题</div>
				<div class="content">内容</div>
				<div class="imgs"></div>
				<div class="note clear">
					<span class="fl">
						<span class="time"></span>
						<span class="type">#<span></span>#</span>
					</span>
					<span class="fr msgnum">0</span>
					<span class="fr message"></span>
					<span class="fr goodnum">0</span>
					<span class="fr isgood good"></span>
				</div>
			</div>
			<div class="goods fl clear">
				<div class="good_ fl">&nbsp;</div>
				<span class="names fl"></span>
			</div>
			<ul class="comments_ fl">

			</ul>
		</div>

	</div>
	<input type="hidden" class="update_time">
	<div class="bottom clear">
		<span class="iscol col fl"></span>
		<label class="fl">
			<input type="text" name="word" class="word">
		</label>
		<div class="send fr">发送</div>
	</div>
	<script src="../../plugins/mui/mui.min.js"></script>
	<script src="../../plugins/mui/mui.zoom.js"></script>
	<script src="../../plugins/mui/mui.previewimage.js"></script>
	<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
	<script src="../../js/getApiToken.js"></script>
	<script src="../../js/md5.js"></script>
	<script>
	mui.init({
		swipeBack: false,
//		statusBarBackground: '#43ac45',
		gestureConfig: {
			doubletap: true
		}
	});
	mui.plusReady(function(){
		//关闭等待框
		plus.nativeUI.closeWaiting();
		//显示当前页面
		mui.currentWebview.show('slide-in-right',200);
		var self = plus.webview.currentWebview();
		var article_id = self.article_id;
		var user_id = plus.storage.getItem('cg_user_id');
		var user_token = plus.storage.getItem('cg_user_token');
		var username = plus.storage.getItem('cg_nickname');
		var userheadimg = plus.storage.getItem('cg_headimgurl');
		//获取帖子详情
		myAjax(
				'card/card_detail/getdetail',
				'get', {
//					'api_token': '8410573e1f33d0cd46c54f1cff32f69b',
					'user_id':user_id,
					'user_token':user_token,
					'article_id':article_id
				}, function(data) {
					if(data.success) {
						var html = '';
						var imgs = data.data.list_img.thumbnail;
						var imgs_ = data.data.list_img.original;
						if(imgs){
							var imglen = imgs.length;
							console.log(JSON.stringify(imgs));
							for(var j =0 ; j<imglen ;j++){
								html+=
										'<div class="img">'+
										'<img src='+ _baseUrl+imgs[j]+' alt="评论图" data-preview-src='+_baseUrl+imgs_[j]+' data-preview-group="1" >'+
										'</div>';
							}
						}
						$('.imgs' ).append(html);
						$('.fr .name').text(data.data.nickname);
						$('.title').text(data.data.title);
						$('.content').text(data.data.content);
						$('.note .time' ).text(data.data.time_text);
						$('.note .type span' ).text(data.data.interest);
						$('.userhead' ).attr('src',_baseUrl+data.data.headimgurl);
						$('.msgnum' ).text(data.data.comments);
						$('.goodnum' ).text(data.data.likes);
						if(data.like_status){
							$('.isgood' ).removeClass('good').addClass('good_');
						}
						if(data.collect_status){
							$('.iscol' ).removeClass('col').addClass('col_');
						}
						setTimeout(function(){
							mui(".imgs img").each(function () {
								var this_ = this;
								var ih = this_.offsetHeight;
								var iw = this_.offsetWidth;
								if(ih == iw){
									this_.offsetHeight = '78px';
									this_.offsetWidth = '78px';
								}else if(ih > iw){
									this_.width = '78px';
									this.style.top = -this_.offsetHeight/2+78/2 + 'px';
								}else{
									this.style.height = '78px';
									this.style.left = -this_.offsetWidth/2+78/2 + 'px';
								}
							});
						},150);
						mui.previewImage();
					} else {
						mui.toast('失败');
					}
				});
		//获取评论
		myAjax(
				'card/card/getComment',
				'get', {
//					'api_token': '37b463e6ce5054200e02a398732e2856',
					'article_id':article_id,
					'page_cnt':10
				}, function(data) {
					if(data.success) {
						var lists = data.data;
						var len = lists.length;
						var html = '';
						for(var i = 0 ;i < len ;i++){
							var list = lists[i];
//							console.log(i+':'+list.headimgurl);
							html +=
									'<li class="clear">'+
									'<div class="user fl">'+
									'<img src='+_baseUrl+list.headimgurl+' alt="用户头像">'+
									'</div>'+
									'<div class="cr_ fl">'+
									'<div class="clear cr">'+
									'<span class="name fl limit">'+list.nickname+'</span>'+
									'<span class="time fr">'+list.update_time_text+'</span>'+
									'<div class="comment fl">'+list.content+'</div>'+
									'</div>'+
									'</div>'+
									'</li>';
						}
						var coms = $('.comments_' );
						coms.append(html);
						$('.update_time').attr('update_time',data.update_time);
						$('.user>img' ).on('tap',(function(){
							var src = $(this ).attr(src);
						}));
						if(len == 10){
							coms.after('<div class="addmore fl">+点击加载更多</div>');
						}
					} else {
						mui.alert('获取评论失败');
					}
				});
		//获取点赞人;
		isgood();
		function isgood(){
			myAjax(
					'card/card/getArticleLike',
					'get', {
//						'api_token': '4c770d345ea8f8b896f9648542222d8e',
						'article_id':article_id
					}, function(data) {
						if(data.success) {
							var ps = data.data;
							var pslen = ps.length;
							var text ='';
							for(var i = 0 ;i<pslen ;i++){
								text += ps[i ].nickname;
								if(i != pslen - 1){
									text += '、';
								}
							}
							$('.names' ).text(text);
						} else {
							mui.alert('获取点赞人失败');
						}
					});
		}
		//点赞
		mui(".isgood").each(function () {
			var this_ = this;
			this_.addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x
				var n = $(this_).prev().text();
				var like = $(this_ ).hasClass('good')?'set':'cancel';
				var url = 'card/card/'+ like +'Like';
				myAjax(
						url,
						'post', {
//							'api_token': 'f85c8e3ffaa4b6924af2e1c21b6b81a0',
							'user_id':user_id,
							'user_token':user_token,
							'article_id':article_id
						}, function(data) {
							if(data.success) {
								$(this_ ).toggleClass('good');
								$(this_ ).toggleClass('good_');
								$(this_ ).hasClass('good')?n--:n++;
								$(this_).prev().text(n);
								//点赞人刷新
								isgood();
							} else {
								mui.alert('点赞失败');
							}
						});
			});
		});
		//收藏
		mui(".iscol").each(function () {
			var this_ = this;
			this_.addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x
				var like = $(this_ ).hasClass('col')?'set':'cancel';
				var url = 'card/card/'+ like +'Collect';
				//ajax
				myAjax(
						url,
						'post', {
//							'api_token': 'b355d6c9061924a547475a118b455727',
							'user_id':user_id,
							'user_token':user_token,
							'article_id':article_id
						}, function(data) {
							if(data.success) {
								$(this_ ).toggleClass('col');
								$(this_ ).toggleClass('col_');
								if($(this_).hasClass('col_')){
									mui.toast('收藏成功');
								}else{
									mui.toast('取消收藏');
								}
							} else {
								mui.alert('收藏失败');
							}
						});
			});
		});
		//评论聚焦
		mui(".message,.msgnum").each(function () {
			var this_ = this;
			this_.addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x
				document.getElementsByClassName("word")[0].focus();
			});
		});
		//评论
		document.getElementsByClassName("send")[0].addEventListener('tap', function(e) {
			var word = document.getElementsByClassName("word")[0];
			var content = word.value;
			if(content.trim()){
				
				myAjax(
						'card/card/setComment',
						'post', {
//							'api_token': '0127475a1523a6e6f4374b26a803c579',
							'user_id':user_id,
							'user_token':user_token,
							'content':content,
							'article_id':article_id
						}, function(data) {
							console.log(JSON.stringify(data))
							if(data.success) {
								mui.alert('评论成功！');
								var html='';
								var msg = document.getElementsByClassName("msgnum")[0] ;
								var n = parseInt($(msg).text()) + 1;
								$(msg).text(n);
								html +=
										'<li class="clear">'+
										'<div class="user fl">'+
										'<img src='+userheadimg+' alt="用户头像">'+
										'</div>'+
										'<div class="cr_ fl">'+
										'<div class="clear cr">'+
										'<span class="name fl limit">'+username+'</span>'+
										'<span class="time fr">刚刚</span>'+
										'<div class="comment">'+content+'</div>'+
										'</div>'+
										'</div>'+
										'</li>';
							$('.comments_' ).prepend(html);
							calc();
							word.value = '';
							word.blur();
							}else {
								mui.alert('评论失败');
							}
						});
			}else{
				mui.toast('您的评论不能为空');
			}
		});
		//图片预览
		//mui.previewImage();
		//ul显示
		mui(".comments").each(function () {
			var this_ = this;
			var len = this_.getElementsByTagName('li' ).length;
			if( len == 0){
				this_.style.display = 'none';
			}
		});
		//加载更多
		$('.lists').delegate('.addmore','tap',function(){
			$(this ).remove();
			var update_time = $('.update_time').attr('update_time');
			myAjax(
					'card/card/getComment',
					'get', {
//						'api_token': '37b463e6ce5054200e02a398732e2856',
						'article_id':article_id,
						'page_cnt':10,
						'update_time':update_time
					}, function(data) {
						if(data.success)
						{
							var lists = data.data;
							var len = lists.length;
							var html = '';
							for( var i = 0; i < len; i++ )
							{
								var list = lists[ i ];
								html +=
										'<li class="clear">' +
										'<div class="user fl">' +
										'<img src=' + _baseUrl + list.headimgurl + ' alt="用户头像">' +
										'</div>' +
										'<div class="cr_ fl">' +
										'<div class="clear cr">' +
										'<span class="name fl">' + list.nickname + '</span>' +
										'<span class="time fr">' + list.update_time_text + '</span>' +
										'<div class="comment">' + list.content + '</div>' +
										'</div>' +
										'</div>' +
										'</li>';
							}
							var coms = $('.comments_' );
							coms.append(html);
							calc();
							$('.update_time').attr('update_time',data.update_time);
							if(len == 10){
								coms.after('<div class="addmore fl">+点击加载更多</div>');
							}else{
								coms.after('<div class="addno fl">没有更多了</div>');
							}
						}
					})
		});
	});
	//兼容calc
	calc();
	function calc(){
		var ww =document.body.clientWidth;
		var label = $('.bottom label');
		var word = $('.bottom .word');
		label.width((0.8*ww - 100));
		word.width((0.8*ww - 100));
	}
	</script>
</body>
</html>